<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="资源名称:" prop="sourceName">
            {{ formData.sourceName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源编号:" prop="sourceCode">
            {{ formData.sourceCode }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源类型:" prop="sourceType">
            <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="formData.sourceType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来源信息:" prop="sourceDesc">
            <dict-tag :type="DICT_TYPE.SOURCE_DESC" :value="formData.sourceDesc" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件类型:" prop="fileType">
            {{ formData.fileType }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件大小:" prop="fileSize">
            <!-- {{ formData.fileSize }}B -->
            {{ fileSizeFormatter('', '', formData.fileSize) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源封面:" prop="mainImage">
            <el-image
              style="width: 44px; height: 44px;"
              :src="formData.mainImage"
              :preview-src-list="[formData.mainImage]"
              fit="cover"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源文件:" prop="file">
            <UploadFile
              v-model="formData.file"
              :limit="1"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源来源:" prop="sourceFrom">
            <!-- <dict-tag :type="DICT_TYPE.SOURCE_FROM" :value="formData.sourceFrom" /> -->
            {{ formData.sourceFrom }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库时间:" prop="enterTime">
            {{ formatDate(formData.enterTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间:" prop="updateTime">
            {{ formatDate(formData.updateTime)}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleBpm" type="primary">流程图</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { formatDate } from '@/utils/formatTime'
import { fileSizeFormatter } from '@/utils'
import { SourceApi, SourceVO } from '@/api/dr/source'

defineOptions({ name: 'SourceDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref('资源信息查看')
const formLoading = ref(false)

const	formData = ref<SourceVO | any>({})
// 流程图
const handleBpm = () => {

}
const getDetail = () => {
  formLoading.value = true
  SourceApi.getSource(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
  }).finally(() => {
    formLoading.value = false
  })
}
const open = () => {
  getDetail()
}
</script>

<style lang="scss" scoped>
</style>
